<template>
	<div class="GlobalUser">
		<transition>
			<div class="UserMenu flex_column">
				<!-- 用户头像 -->
				<div class="UserMenu-avatar flex flex_center flex_row" v-if="$store.state.isLogin">
					<img src="http://blog.libinghui.cn/wp-content/uploads/2021/11/IMG_380220211104-155652-96x96.jpg" alt="" />
					<div style="width: 100%; text-align: center">
						<h4>傻猪猪</h4>
						<van-tag type="primary">清淡</van-tag>
						<van-tag type="primary">蔬菜</van-tag>
					</div>
				</div>
				<div class="UserMenu-avatar flex flex_center flex_row" v-else>
					<div style="width: 100%; text-align: center">
						<h4>用户未登录</h4>
					</div>
				</div>
				<div class="UserMenu-Content flex">
					<ul class="flex flex_column">
						<li class="flex flex_center" v-for="(item, index) in MenuDataList" :key="index" @click="getItemInfo(item)">
							{{ item.title }}
						</li>
					</ul>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'GLobalUser',
	data() {
		return {
			MenuDataList: [
				{ title: '我的订单', path: '/user/order' },
				{ title: '我的信息', path: '/user/info' },
				{ title: '我的饮食爱好', path: '/user/diet' },
				{ title: '我的打卡', path: '/user/share' },
				{ title: '我的收藏', path: '/user/collect' },
				{ title: '送餐地址', path: '/user/address' },
				{ title: '退出登录', path: '' },
			],
		};
	},
	methods: {
		/**
		 * @method 获取菜单项信息
		 */
		getItemInfo(item) {
			if (item.title == '退出登录') {
				sessionStorage.removeItem('userInfo');
				sessionStorage.removeItem('isLogin');
				this.$toast.success('退出成功');
				window.location.reload();
			}

			this.$store.commit('changeUserPageShow');
			this.$router.push(item.path);
		},
	},
};
</script>

<style>
.flex {
	display: flex;
}

.flex_row {
	flex-direction: row;
}

.flex_column {
	flex-direction: column;
}

.flex_center {
	justify-content: flex-start;
	align-items: center;
	padding-left: 20px;
}

.UserMenu {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 0;
	display: flex;
	background-color: rgb(255, 215, 25);
}

.UserMenu-avatar {
	width: 100%;
	height: 130px;
}

.UserMenu-avatar img {
	width: 60px;
	border-radius: 10px;
}
.UserMenu-avatar p {
	color: #000;
	font-weight: 700;
	margin-left: 20px;
}

.UserMenu-Content ul {
	width: 100%;
	list-style: none;
}

.UserMenu-Content ul li {
	width: 100%;
	line-height: 70px;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
}

.van-tag {
	margin-left: 5px;
}
</style>
